<template>
  <div class="log-page page-main">
    <search-form :model="searchParams" @search="search">
      <a-form-item label="关键字" name="key">
        <a-input v-model:value="searchParams.key" placeholder="请输入用户名/用户操作" />
      </a-form-item>
    </search-form>
    <g-table
      ref="tableRef"
      sort=""
      :columns="columns"
      :api="getLogs"
      :params="searchParams"
      :scroll="{x: '100%', y: '70vh'}"
    />
  </div>
</template>

<script setup lang="tsx">
import { getLogs } from './api';
import type { ILog } from './entity';

const searchParams = reactive({
  key: ''
})

const { tableRef, columns, search } = useTable<ILog>([
  { title: 'ID', dataIndex: 'id', width: 80,ellipsis: true },
  { title: '用户名', dataIndex: 'username', width: 100 },
  { title: '用户操作', dataIndex: 'operation', width: 100 },
  { title: '请求方法', dataIndex: 'method', width: 160, ellipsis: true },
  { title: '请求参数', dataIndex: 'params', width: 200, ellipsis: true },
  { title: '执行时长(毫秒)', dataIndex: 'time', width: 140 },
  { title: 'IP地址', dataIndex: 'ip', width: 160 },
  { title: '创建时间', dataIndex: 'createDate', width: 180 },
])
</script>

<style lang="less"></style>